<div class="container reg_container" ng-app="userRegApp">
  <h1 class="title">COLOO:用心分享每一天</h1>
  <div class="row">
    <div class="col-md-8 col-md-offset-2 reg_content" ng-controller="userReg">
      <form class="form-horizontal" name="regForm" ng-submit="processRegForm(regForm.$valid)" novalidate>
        <!--错误信息提示-->
        <h3 style="margin: 10px 0;" class="text-center">用户注册 </h3>
        <p class="text-center text-danger" id="errorInfo">{{regErrors}}</p>
        <!--用户名-->
        <p class="text-center text-danger" ng-cloak ng-show="regForm.username.$invalid && !regForm.username.$pristine"><i class="glyphicon glyphicon-info-sign"></i> 用户名5-12个英文数字组合</p>
        <div class="form-group">
          <label for="inputUsername" class="col-sm-2 col-sm-offset-1 control-label">用户名:</label>
          <div class="col-sm-6">
            <input type="text" name="username" class="form-control" id="inputUsername" ng-minlength="5" ng-maxlength="12" ng-model="regFormData.username" ng-pattern="/^[a-zA-Z][a-zA-Z0-9_]{4,11}$/" placeholder="请输入用户名" required autofocus>
          </div>
        </div>
        <!--密码-->
        <p class="text-center text-danger" ng-cloak  ng-show="regForm.password.$invalid && !regForm.password.$pristine"><i class="glyphicon glyphicon-info-sign"></i> 6-12位，只能包含字母、数字和下划线</p>
        <div class="form-group">
          <label for="inputPassword" class="col-sm-2 col-sm-offset-1 control-label">密码:</label>
          <div class="col-sm-6">
            <input type="password" name="password" class="form-control" id="inputPassword" ng-model="regFormData.password" ng-pattern="/(?!^\\d+$)(?!^[a-zA-Z]+$)(?!^[_#@]+$).{5,}/" ng-maxlength="12" placeholder="请输入密码" required>
          </div>
        </div>
        <!--确认密码-->
        <p class="text-center text-danger regError" ng-cloak ng-show="regForm.passwordRep.$invalid && !regForm.passwordRep.$pristine"><i class="glyphicon glyphicon-info-sign"></i> 两次输入的密码不匹配</p>
        <div class="form-group">
          <label for="inputPasswordRep" class="col-sm-2 col-sm-offset-1 control-label">确认密码:</label>
          <div class="col-sm-6">
            <input type="password" name="passwordRep" class="form-control" id="inputPasswordRep" pw-check="userPassword" ng-model="regFormData.passwordRep" ng-pattern="/(?!^\\d+$)(?!^[a-zA-Z]+$)(?!^[_#@]+$).{5,}/" ng-maxlength="12" placeholder="请再次输入密码" required>
          </div>
        </div>
        <!--邮箱-->
        <p class="text-center text-danger" ng-cloak ng-show="regForm.email.$invalid && !regForm.email.$pristine"><i class="glyphicon glyphicon-info-sign"></i> 请填写正确的邮箱地址</p>
        <div class="form-group">
          <label for="inputEmail" class="col-sm-2 col-sm-offset-1 control-label">邮箱:</label>
          <div class="col-sm-6">
            <input type="email" name="email" class="form-control" id="inputEmail" ng-model="regFormData.email" ng-pattern="/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/" placeholder="请输入邮箱" required>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-3 col-sm-6">
            <div class="checkbox">
              <label>
                <input type="checkbox"> Remember me
              </label>
            </div>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-3 col-sm-2">
            <button type="submit" class="btn btn-default" ng-disabled="regForm.$invalid">注册</button>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-3 col-sm-9">
            <p>已有账号，请<a href="javascript:void(0);" data-toggle="modal" data-target="#loginModal">登录</a></p>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>